import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  // state中专门用来放全局属性
  state: {
    count:0
  },


  // getter  不会修改原始数据
  // getter 用于对store中的数据进行加工处理之后形成新的数据  类似vue的计算属性
  // stroe中的数据发生变化 Getter的数据也会跟着变化
  getters:{
    shownum(state){
      return '当前最新的值为：['+state.count+']'
    }
  },



  // 用于变更stroe中的数据
  // 在vuex只能通过mutations变更store中的数据 不可以直接操作store中的数据
  // 在mutations中不能使用异步的代码
  mutations: {
    add(state){
      state.count++
    },
    sub(state,step){
      state.count = state.count - step
    },
    sub1(state){
      state.count--
    },
    add1(state,step){
      state.count = state.count+step
    }
  },

  // actions 专门处理异步的任务
  // 在actions中不能直接修改state中的数据
  actions: {
    addAsync(context){
     setTimeout(()=>{
      context.commit('add')
     },2000)
    },
    addNasync(context,step){
      setTimeout(()=>{
        context.commit('add1',step)
      },2000)
    }
  },
  modules: {},
});
